<template>
	<view>
		<view class="order">

			<view class="waitPay">
				等待支付
			</view>
			<!-- 收货人信息 -->
			<view class="personInfo" @click="goAddress">
				<view class="infoName">
					<text>姓名: {{list.name}}</text> 
					<text>电话号码: {{list.phoneNumber}}</text>
				</view>
				<view class="infoAddress">
					<text>收货地址: {{list.province}}{{list.city}}{{list.region}} {{list.detailAddress}}</text>
				</view>
			</view>


			<!-- 商品相关 -->
			<view class="proCard">
				<view class="proTop">
					<view class="proOrderNum">订单编号:{{list_arr.orderSn}}</view>
					<view class="proCon">等待支付</view>
				</view>
				<view class="proInfo" v-for="item in list_pro">
					<image :src="item.productPic" mode=""></image>
					<view class="proInfoInner">
						<view class="proInfoTop">
							<view class="proInfoName">{{item.productName}}</view>
							<view class="proInfoPri">¥{{item.price}}</view>
						</view>
						<view class="proInfoMiddle">
							<view class="proInfoSernum">编号:</view>
							<view class="proInfoNum">x {{item.quantity}}</view>
						</view>
						<view class="proInfoBottom" v-if="item.productAttr">
							规格:<text class="proInfoSize" v-for="items in JSON.parse(item.productAttr)">{{items.key}}:{{items.value}}</text>
						</view>
					</view>
				</view>

				<view class="allMoney">
					合计:{{allPri}}元
				</view>

				<view class="confirm">
					确定付款
				</view>
				<view class="clearn"></view>
			</view>




		</view>
	</view>
</template>

<script>
	import {
		addPreOrder,getPreOrderById,findAllAddress
	} from "@/api/user/index.js"
	export default {
		data() {
			return {
				//地址相关数据
				list: [],
				isAdd:false,
				//商品相关数据
				list_pro: [],
				allPri: '',
				orderId:"",
				list_arr:[],
				val:'',
			}
		},
		onLoad(val) {
			//接收来自商品页面的传值
			this.val = val.type
			console.log(this.val)
			//地址设置
			findAllAddress().then(res=>{
				console.log(res)
				var arr =res.data.items.filter(res=>res.defaultStatus==1)
				this.list=arr[0]
				this.isAdd=true
				this.list = uni.getStorageSync("isAddress")
				console.log(this.list)
			})
			//商品数据
			if(this.val=='goBuy'){
				var arr = JSON.parse(uni.getStorageSync("goBuys"))
				console.log(arr)
				this.list_pro=arr[0]
				this.addPri()
			}else{
				this.list_pro = uni.getStorageSync("orderPro")
				this.addPri()
			}
			
			//传入所有已选择的商品信息
			var orderItemList = []
			
			if(this.val=='goBuy'){
				this.list_pro.forEach(item => {
					console.log(item)
					var obj = {
						cartId: item.id,
						productId: item.ids,
						productQuantity: item.buyNums,
						productSkuId: item.isBorder
					}
					orderItemList.push(obj)
					
					console.log(this.list_pro)
				})
			}else{
					this.list_pro.forEach(item => {
					var obj = {
						cartId: item.id,
						productId: item.productId,
						productQuantity: item.quantity,
						productSkuId: item.productSkuId
					}
					orderItemList.push(obj)

				})
			}
			
			//获得orderId
			addPreOrder({
				orderItemList
			}).then(res => {
				console.log(res)
				this.orderId = res.data.orderId
				//获取订单编号
				getPreOrderById(this.orderId).then(res=>{
					console.log(res)
					this.list_arr = res.data.orderItems[0]
				})
			})
			
		},
		onShow() {
			if(this.isAdd){
				this.list = uni.getStorageSync("isAddress")
			}else{
				return
			}
			
			
		},

		computed: {

		},
		methods: {
			goAddress() {
				uni.navigateTo({
					url: "../../address/address?type=select"
				})
			},
			addPri() {

				var arr = this.list_pro.reduce((cur, val) => {
					if (val.isChecked == true) {
						return cur + val.price * val.quantity
					} else {
						return cur
					}

				}, 0)

				this.allPri = arr
				// console.log(this.allNum)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>
<style lang="scss" scoped>
	.order {
		margin: 0 30px;

		// 等待支付
		.waitPay {
			height: 43px;
			line-height: 43px;
			border-bottom: 1px solid #ccc;
			font-size: 18px;
			color: #494949;
		}

		// 地址资料
		.personInfo {
			padding: 15px 0;
			font-size: 14px;
			color: #494949;
			border-bottom: 1px solid #ccc;
			// .infoName{

			// }
			// .infoAddress{

			// }
		}

		//商品资料
		.proCard {
			width: 300px;
			// box-sizing: border-box;
			padding: 18px;
			border-radius: 12px;
			background-color: #fff;
			margin: 15px auto;
			font-size: 12px;
			color: #3e3e3e;

			.proTop {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f1ece7;
				padding-bottom: 15px;

				.proOrderNum {}

				.proCon {}
			}

			.proInfo {
				display: flex;
				justify-content: flex-start;
				padding: 15px 0;
				border-bottom: 1px solid #f1ece7;

				image {
					width: 81px;
					height: 81px;
				}

				.proInfoInner {
					display: flex;
					flex-direction: column;
					margin-left: 14px;

					.proInfoTop {

						width: 215px;
						display: flex;
						justify-content: space-between;

						.proInfoName {
							white-space: nowrap;
							overflow: hidden;
							// text-overflow: ellipsis;
						}

						.proInfoPri {}
					}

					.proInfoMiddle {
						display: flex;
						justify-content: space-between;

						.proInfoSernum {}

						.proInfoNum {}
					}

					.proInfoBottom {
						.proInfoSize {}
					}
				}
			}

			.allMoney {
				text-align: right;
				font-size: 13px;
				line-height: 18px;
				margin-top: 7px;
			}

			.confirm {
				float: right;
				width: 62px;
				height: 25px;
				border: 1px solid #2d4f43;
				font-size: 13px;
				border-radius: 5px;
				color: #2d4f43;
				text-align: center;
				line-height: 25px;
				margin-top: 10px;
			}

			.clearn {
				clear: both;
			}
		}
	}
</style>
